<template>
<div class="content-wrapper">
  <el-carousel :interval="5000" autoplay="false" trigger="click" height="900px" arrow="always" ref="carousel">
    <el-carousel-item name="page1">
      <Page1/>
    </el-carousel-item>
    <el-carousel-item name="page2">
      <Page2/>
    </el-carousel-item>
  </el-carousel>
</div>
</template>

<script>
  import Page1 from './components/page1'
  import Page2 from './components/page2'
  export default {
    name: 'index',
    components: {
      Page1,
      Page2
    },
    mounted() {
      this.$bus.on("select-item", (data) => {
        console.log("select-item", data)
        this.$refs.carousel.setActiveItem('page1')
      })
    }
  }
</script>

<style scoped lang="scss">
  .content-wrapper:after{
    content: '';
    width: 1920px;
    height: 1080px;
    position: fixed;
    top:0;
    left: 0;
    z-index: -1;
    background: url("~@/assets/images/case/bgline.png") no-repeat bottom;
    background-size: 100%;
  }
  /deep/ .el-carousel__arrow{
    background-color: rgba(255, 255, 255, .6);
    color: #000;
    top:95%;
    width: 24px;
    height: 24px;
  }
  /deep/ .el-carousel__arrow--left{
    left: 50%;
    margin-left: -100px;
  }
  /deep/ .el-carousel__arrow--right{
    right: 50%;
    margin-right: -100px;
  }
  /deep/ .el-carousel__indicators--horizontal{
    bottom: 30px;
  }
  /deep/ .el-carousel__button{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0 5px;
  }
</style>
